<template>
	<view class="notOpened">
		<view class="topBg">
			<view class="title">
				<text @click="buyHistory">购买记录</text>
			</view>
			<view v-if="vipList && vipList.length >0" class="grade" :style="{ 'backgroundImage': 'url(' + radiusLine + ')' }">
				<view>
					<view>
						<text v-if="nowNum!=0" @click="change(1)">{{vipList[nowNum].prevLevelName}}</text>
						<text v-else @click="change(1)">{{"-"}}</text>
					</view>
				</view>
				<view>
					<view><text>{{ vipList[nowNum].vipName }}</text></view>
				</view>
				<view>
					<view>
						<text v-if="nowNum==(vipList.length-1)" @click="change(2)">{{'-'}}</text>
						<text v-else @click="change(2)">{{ vipList[nowNum].nextLevelName}}</text>
					</view>
				</view>
			</view>
			<view class="vipLogo" :style="{ 'backgroundImage': 'url(' + quanyiBG + ')' }">
				<view class="headerIcon">
					<!-- <u-icon name="account-fill" color="#C3C7CD" size="60"></u-icon> -->
					<image :src='userInfo.icon' style='width:100%;height:100%'/>
				</view>
				<view class="userPhone">
					<view>{{ tel&&tel.replace(/(\d{3})\d{4}(\d{4})/,"$1****$2") || "-"}}</view>
					<view>开通会员福利不限量</view>
				</view>
			</view>
		</view>
		<view class="package">
			<view class="membersList">
				<view class="memberScrollList">
					<!-- 首开特惠-->
					<view v-if="noVipDataDetail.yearlyDiscountEnabled==1" class="memberItem"
						@tap="setMemberIndex('year1')">
						<view class="tehui">首开特惠</view>
						<image v-if="getMemberIndex=='year1'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyDiscountPrice | toFixedF }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.yearlyPrice | toFixedF  }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.yearlyPrice-noVipDataDetail.yearlyDiscountPrice) | toFixedF }}元
						</view>
					</view>
					<view v-else-if="noVipDataDetail.yearlyEnabled == 1" class="memberItem" @tap="setMemberIndex('year3')">
						<image v-if="getMemberIndex=='year3'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyPrice | toFixedF  }}</view>
					</view>
					
					<view v-if="noVipDataDetail.halfDiscountEnabled==1" class="memberItem"
						@tap="setMemberIndex('half1')">
						<view class="tehui">首开特惠</view>
						<image v-if="getMemberIndex=='half1'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包半年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfDiscountPrice | toFixedF  }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.halfPrice | toFixedF }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.halfPrice-noVipDataDetail.halfDiscountPrice) | toFixedF }}元
						</view>
					</view>
					<view v-else-if="noVipDataDetail.halfEnabled == 1" class="memberItem" @tap="setMemberIndex('half3')">
						<image v-if="getMemberIndex=='half3'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包半年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfPrice | toFixedF  }}</view>
					</view>
					
					
					<view v-if="noVipDataDetail.quarterlyDiscountEnabled==1"
						class="memberItem"
						@tap="setMemberIndex('quarterly1')">
						<view class="tehui">首开特惠</view>
						<image v-if="getMemberIndex=='quarterly1'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包季</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyDiscountPrice | toFixedF  }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.quarterlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.quarterlyPrice-noVipDataDetail.quarterlyDiscountPrice) | toFixedF }}元
						</view>
					</view>
					<view v-else-if="noVipDataDetail.quarterlyEnabled == 1" class="memberItem" @tap="setMemberIndex('quarterly3')">
						<image v-if="getMemberIndex=='quarterly3'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包季</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyPrice | toFixedF  }}</view>
					</view>
					
					
					<view v-if="noVipDataDetail.monthlyDiscountEnabled==1" class="memberItem"
						@tap="setMemberIndex('monthly1')">
						<view class="tehui">首开特惠</view>
						<image v-if="getMemberIndex=='monthly1'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包月
							<!-- {{(noVipDataDetail.monthlyPrice-noVipDataDetail.monthlyDiscountPrice) | toFixedF }} -->
						</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyDiscountPrice | toFixedF }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.monthlyPrice | toFixedF }}</view>
						<view class="lijian">
							立减{{ (noVipDataDetail.monthlyPrice-noVipDataDetail.monthlyDiscountPrice) | toFixedF}}元
						</view>
					</view>
					<view v-else-if="noVipDataDetail.monthlyEnabled == 1" class="memberItem" @tap="setMemberIndex('monthly3')">
						<image v-if="getMemberIndex=='monthly3'" class="checked" :src="checkboxselIcon"/>
						<view style="font-size: 26rpx;color: #3D3D3D;">包月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyPrice | toFixedF }}</view>
					</view>
					<!-- 连续包 -->
					<!-- <view class="memberItem" v-if="noVipDataDetail.yearlyContinuousEnabled==1"
						@tap="setMemberIndex('year2')">
						<image class="checked" v-if="getMemberIndex=='year2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.yearlyContinuousDuration.toFixed(2)|| '-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.yearlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.yearlyPrice-noVipDataDetail.yearlyContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.halfContinuousEnabled==1"
						@tap="setMemberIndex('half2')">
						<image class="checked" v-if="getMemberIndex=='half2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包半年</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.halfContinuousDuration.toFixed(2)|| '-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.halfPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.halfPrice-noVipDataDetail.halfContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.quarterlyContinuousEnabled==1"
						@tap="setMemberIndex('quarterly2')">
						<image class="checked" v-if="getMemberIndex=='quarterly2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包季</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.quarterlyContinuousDuration.toFixed(2)|| '-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.quarterlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{(noVipDataDetail.quarterlyPrice-noVipDataDetail.quarterlyContinuousDuration).toFixed(2)}}元
						</view>
					</view>
					<view class="memberItem" v-if="noVipDataDetail.monthlyContinuousEnabled==1"
						@tap="setMemberIndex('monthly2')">
						<image class="checked" v-if="getMemberIndex=='monthly2'" :src="checkboxselIcon"></image>
						<view style="font-size: 26rpx;color: #3D3D3D;">连续包月</view>
						<view style="font-size: 36rpx;color: #DB9132;margin: 18rpx 0;font-weight: bold;">
							￥{{noVipDataDetail.monthlyContinuousDuration.toFixed(2)||'-' }}</view>
						<view style="font-size: 32rpx;color: #606266;text-decoration: line-through;">
							￥{{ noVipDataDetail.monthlyPrice.toFixed(2) }}</view>
						<view class="lijian">
							立减{{ (noVipDataDetail.monthlyPrice-noVipDataDetail.monthlyContinuousDuration).toFixed(2) }}元
						</view>
					</view> -->
					<!-- 单价买 -->
					
					
					
					
				</view>
			</view>
			<!-- <view class="tips">到期前一天44元/月自动续费，可随时取消</view> -->
		</view>
		<view class="rewardBox">
			<view class="title" :style="{ backgroundImage: 'url(' + titleBg + ')' }">专享权益</view>
			<view v-if="isQY" class="integralCouponList">
				<view v-if="list.equityServiceDiscountsStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`"/>
						<view class="text-1">服务费单价</view>
					</view>
					<view class="tip">{{list.equityServiceDiscountsStr}}</view>
				</view>
				<view v-if="list.equityBoundsStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_jianglijin3703530708666233956.png`"/>
						<view class="text-1">奖励金</view>
					</view>
					<view class="tip">{{list.equityBoundsStr}}</view>
				</view>
				<view v-if="list.discountLimitCountstr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_mianfuwucishu1479319900652158668.png`"/>
						<view class="text-1">免服务费次数</view>
					</view>
					<view class="tip">{{list.discountLimitCountstr}}</view>
				</view>
				<view v-if="list.equityPointsStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_jifen2011325536646060104216.png`"/>
						<view class="text-1">积分</view>
					</view>
					<view class="tip">{{list.equityPointsStr}}</view>
				</view>
				<view v-if="list.equityCouponStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon_youhuiquan%2013435170720801394849.png`"/>
						<view class="text-1">优惠券</view>
					</view>
					<view class="tip">{{list.equityCouponStr}}</view>
				</view>
				<view v-if="list.equityCardStr" class="integralCouponItem">
					<view class="box1">
						<image :src="`${imgUrlBase2}/icon-kabao.png`"/>
						<view class="text-1">卡</view>
					</view>
					<view class="tip">{{list.equityCardStr}}</view>
				</view>
			</view>
			<view v-if="!isQY" class="integralCouponList">
				<view class="none">暂无数据</view>
			</view>
			<view style="display:flex;align-items:center;">
				<view class="my-line"/>
				<view class="my-dot"/>
				<view class="title" style="color: #C19C68;">卡券</view>
				<view class="my-dot"/>
				<view class="my-line"/>
			</view>
			<view v-if="isKJ" class="cashCouponList">
				<view v-for="(item,index) in list.couponVoList" :key="index" class="cashCouponItem"
					:style="{ backgroundImage: 'url(' + integralBg + ')'}">
					<view>{{ item.couponTypeStr }}</view>
					<view>
						<text v-if="item.couponTypeStr!='折扣券'" style="font-size:20rpx;">¥</text>
						{{ item.couponQuota }}
						<text v-if="item.couponTypeStr=='折扣券'" style="font-size:20rpx;">折 </text>
						<text v-if="item.num>1" style="font-size:22rpx;">X{{ item.num }}</text>  
					</view>
					<view>满{{item.useSillStr}}可用</view>
				</view>
				<view v-for="(item,index) in list.cardVoList" :key="index" class="cashCouponItem"
					:style="{ backgroundImage: 'url(' + integralBg + ')' }">
					<template  v-if="item.cardTypeStr=='次数卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}次
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
						<view>低于{{item.useSillStr}}可用</view>
					</template>
					<template  v-if="item.cardTypeStr=='电量卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}度
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
					</template>
					<template v-if="item.cardTypeStr=='折扣卡'">
						<view>{{ item.cardTypeStr }}</view>
						<view>
							{{ item.cardQuota }}折
							<text v-if="item.num>1">X{{ item.num }}</text>
						</view>
						<view>满{{item.useSillStr}}可用</view>
					</template>
				</view>
			</view>
			<view v-if="!isKJ" class="cashCouponList">
				<view class="none">暂无数据</view>
			</view>
		</view>
		<view class="desc">
			<view class="activityTitle">活动说明</view>
			<view class="activityLine"/>
			<view v-if="sellerNo=='hyc'" class="activityContent">
				<view style="font-size: 32rpx; font-weight: bold;">一、VIP会员</view>
				<view>1.会员权益一经购买立即生效，生效后不支持退款</view>
				<view>2.会员有效期：目前有月卡、季卡、年卡可供选择，例：购买月卡后，自购买之日起，30天后失效</view>
				<view>3.服务费优惠：会员有效期内，可享受服务费折扣6折，例：服务费为0.65元/度，则打折后服务费为0.65*0.6=0.39元/度</view>
				<view>4.用户在同一时间段内仅限生效一张会员卡，如若购买多次，则按生效时间依次生效</view>
				<view style="font-size: 32rpx; font-weight: bold;">二、电量卡</view>
				<view>1.购买后立即生效，电量卡一经抵扣，结余电量不支持申请退款</view>
				<view>2.电量卡购买后有效期为30天，有效期内电量卡未抵扣完结余电量可顺延30天，超时失效</view>
				<view>3.使用电量卡抵扣时，如电量卡剩余电量不足以抵扣，超出部分电量则按照站点原价计算费用</view>
			</view>
			<view v-else class="activityContent">
				<view>1.服务费优惠：付费会员期间，可享受服务费折扣</view>
				<view>2.奖励金：虚拟金额，可抵扣服务费，不可提现</view>
				<view>3.免服务费次数：可全额减免服务费次数</view>
				<view>4.积分：积分与成长等级会员关联，可享受成长等级会员权益</view>
				<view>5.优惠券：可用于订单金额减免</view>
			</view>
		</view>
		<view style="width: 100%;height: 130rpx;"/>
		<view v-if="showMingxi" class="mingxiMask"/>
		<view :class="showMingxi?'bottomBtn2':'bottomBtn'">
			<view v-if="showMingxi" class="bottomBtn_top">
				<view class="title">支付明细
					<view class="closeIcon">
						<u-icon color="#909399" name="close" size="28" @click="showMingxi=false"/>
					</view>
				</view>
				<view class="productItem">
					<view>商品</view>
					<view>
						<view>{{name}}</view>
						<view>￥{{ buyPrice || '-' }}</view>
					</view>
				</view>
				<view class="productItem" style="margin-top: 10rpx;">
					<view>优惠</view>
					<view>
						<view>超值优惠</view>
						<view>￥{{discount!=null?discount: '-' }}</view>
					</view>
				</view>
			</view>
			<view class="bottomBtn">
				<view class="left">
					<view class="left_top">
						<view style="font-size: 32rpx;font-weight: bold;color: #FC724C;">￥{{ buyPrice }}</view>
						<view v-if="discount!=null" style="font-size: 22rpx;color: #FC724C;margin: 0 10rpx;">
							已优惠￥{{discount}}元</view>
						<view style="display: flex;flex-direction:row;font-size: 24rpx;margin-left: 10rpx;"
							:style="{ 'color': color }" @click="openMX">
							明细<u-icon :color="color" name="arrow-up" size="28"/>
						</view>
					</view>
					<view class="left_bottom" @click="toAgreement">
						请阅读《<span style="color:#6DB12E">vip会员协议</span>》
					</view>
				</view>
				<view class="right" :style="{ 'backgroundColor': color }" @click="confirmAndOpen()">
					确认协议并开通</view>
			</view>
		</view>
		<u-modal confirmText="我知道了" :content='payResultContent' :show="showPayResult" title="温馨提示"
			@confirm="closeConfirm"/>
	</view>
</template>

<script>
	import {
		noVipDetail,
		verifyPayStatus,
		payleRule,
		vipInfos
	} from '@/api/marketing/vip'
	var https_1 = require('@/api/https.js');
	const app = getApp();
	export default {
		data() {
			return {
				sellerNo: app.globalData.sellerNo,

				imgUrlBase: `${app.globalData.imgUrl}/group1/image`,
				imgUrlBase2: `${app.globalData.imgUrl}/group1/operateSchemeImage`,
				tel: uni.getStorageSync('tel'),
				showPayResult: false,
				payResultContent: '很抱歉，暂不支持',
				showMingxi: false,
				noVipDataDetail: {},
				color: uni.getStorageSync('defaultColor_Green'),
				checkboxselIcon: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/checkboxsel.png`,
				radiusLine: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/radiusLine.png`,
				quanyiBG: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/bgQuanyi.png`,
				getMemberIndex: '',
				titleBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/title_bg.png`,
				redBg: `${app.globalData.imgUrl}/group1/operateSchemeImage/image/Red-bg.png`,
				integralBg: `${app.globalData.imgUrl}/group1/image/bg-红包5991183492684728172.png`,
				optionsId: null,
				choseItem: "",
				buyPrice: 0.00,
				discount: null,
				name: '',
				list: [],
				isQY: false,
				isKJ: false,
				vipList: [],
				nowNum: null,
				userInfo: {},

				// 当前选中的会员信息
				choseItemDetail: {}
			};
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {
			this.getVipList()
		},
		onLoad(options) {
			this.optionsId = options.id
			this.getVipInfo(this.optionsId)

			this.userInfo = uni.getStorageSync('userInfo')
		},
		methods: {
			getVipList() {
				noVipDetail().then(res => {
					if (res.code == 200) {
						this.vipList = res.data
						this.vipList.forEach((item, index) => {
							if (this.optionsId == item.vipId) {
								this.nowNum = index
							}
						})
						this.$set(this.vipList)
					}
				})
			},
			getVipInfo(id) {
				vipInfos(id).then(res => {
					if (res.code == 200) {
						this.noVipDataDetail = res.data[0]
						this.list = this.noVipDataDetail.marketVipExclusiveBenefitsVo
						if (!this.list) {
							this.isQY = false
							this.isKJ = false
						} else {
							if (
								!this.list.discountLimitCountstr &&
								!this.list.equityBoundsStr &&
								!this.list.equityCouponStr &&
								!this.list.equityPointsStr &&
								!this.list.equityServiceDiscountsStr
							) {
								this.isQY = false;
							} else {
								this.isQY = true;
							}
							if (!this.list.cardVoList && !this.list.couponVoList) {
								this.isKJ = false;
							} else {
								this.isKJ = true;
							}

							// 处理卡里面的次数卡数值
							if (this.list.cardVoList?.length > 0) {
								this.list.cardVoList.forEach((vm, index) => {
									if(vm.cardTypeStr=='次数卡'){
										vm.cardQuota = Math.round(vm.cardQuota)
									}
								})
							} else {
								this.list.cardVoList = null;
							}
						}
						this.$set(this.noVipDataDetail)
					}
				})
			},
			change(num) { //1:上一级 2:下一级
				console.log(num)
				if (num == 1) {
					if (this.nowNum > 0) {
						this.getMemberIndex = ''
						this.buyPrice = 0.00
						this.discount = null
						this.choseItem = ""
						this.optionsId = this.vipList[this.nowNum - 1].vipId
						this.getVipInfo(this.optionsId)
						this.getVipList()
					} else {
						uni.showToast({
							title: '已是最低等级!',
							icon: 'none'
						});
					}
				}
				if (num == 2) {
					if (this.nowNum < this.vipList.length - 1) {
						this.getMemberIndex = ''
						this.buyPrice = 0.00
						this.discount = null
						this.choseItem = ""
						this.optionsId = this.vipList[this.nowNum + 1].vipId
						this.getVipInfo(this.optionsId)
						this.getVipList()
					} else {
						uni.showToast({
							title: '已是最高等级!',
							icon: 'none'
						});
					}
				}
			},
			openMX() {
				if (this.choseItem != '') {
					this.showMingxi = true
				} else {
					uni.showToast({
						title: '请选择档次!',
						icon: 'none'
					});
				}
			},
			closeConfirm() {
				this.showPayResult = false;
			},
			confirmAndOpen(num) {
				let that = this;
				if (this.choseItem == '') {
					uni.showToast({
						title: '请选择档次!',
						icon: 'none',
						duration: 1500
					});
					return
				}
				if (num == 1) {
					this.showMingxi = true
					return
				}

				let name = this.getMemberIndex
				let data = ''
				switch (name) {
					case 'year1':
						data = {
							yearlyDiscountEnabled: this.noVipDataDetail.yearlyDiscountEnabled,
							yearlyDiscountPrice: this.noVipDataDetail.yearlyDiscountPrice,
							yearlyContinuousEnabled: this.noVipDataDetail.yearlyContinuousEnabled,
							yearlyContinuousDuration: this.noVipDataDetail.yearlyContinuousDuration,
							yearlyEnabled: this.noVipDataDetail.yearlyEnabled,
							yearlyPrice: this.noVipDataDetail.yearlyPrice
						}
						break;
					case 'half1':
						data = {
							halfDiscountEnabled: this.noVipDataDetail.halfDiscountEnabled,
							halfDiscountPrice: this.noVipDataDetail.halfDiscountPrice,
							halfContinuousEnabled: this.noVipDataDetail.halfContinuousEnabled,
							halfContinuousDuration: this.noVipDataDetail.halfContinuousDuration,
							halfEnabled: this.noVipDataDetail.halfEnabled,
							halfPrice: this.noVipDataDetail.halfPrice
						}
						break;
					case 'quarterly1':
						data = {
							quarterlyDiscountEnabled: this.noVipDataDetail.quarterlyDiscountEnabled,
							quarterlyDiscountPrice: this.noVipDataDetail.quarterlyDiscountPrice,
							quarterlyContinuousEnabled: this.noVipDataDetail.quarterlyContinuousEnabled,
							quarterlyContinuousDuration: this.noVipDataDetail.quarterlyContinuousDuration,
							quarterlyEnabled: this.noVipDataDetail.quarterlyEnabled,
							quarterlyPrice: this.noVipDataDetail.quarterlyPrice
						}
						break;
					case 'monthly1':
						data = {
							monthlyDiscountEnabled: this.noVipDataDetail.monthlyDiscountEnabled,
							monthlyDiscountPrice: this.noVipDataDetail.monthlyDiscountPrice,
							monthlyContinuousEnabled: this.noVipDataDetail.monthlyContinuousEnabled,
							monthlyContinuousDuration: this.noVipDataDetail.monthlyContinuousDuration,
							monthlyEnabled: this.noVipDataDetail.monthlyEnabled,
							monthlyPrice: this.noVipDataDetail.monthlyPrice
						}
						break;
					case 'year2':
						data = {
							yearlyDiscountEnabled: this.noVipDataDetail.yearlyDiscountEnabled,
							yearlyDiscountPrice: this.noVipDataDetail.yearlyDiscountPrice,
							yearlyContinuousEnabled: this.noVipDataDetail.yearlyContinuousEnabled,
							yearlyContinuousDuration: this.noVipDataDetail.yearlyContinuousDuration,
							yearlyEnabled: this.noVipDataDetail.yearlyEnabled,
							yearlyPrice: this.noVipDataDetail.yearlyPrice
						}
						break;
					case 'half2':
						data = {
							halfDiscountEnabled: this.noVipDataDetail.halfDiscountEnabled,
							halfDiscountPrice: this.noVipDataDetail.halfDiscountPrice,
							halfContinuousEnabled: this.noVipDataDetail.halfContinuousEnabled,
							halfContinuousDuration: this.noVipDataDetail.halfContinuousDuration,
							halfEnabled: this.noVipDataDetail.halfEnabled,
							halfPrice: this.noVipDataDetail.halfPrice
						}
						break;
					case 'quarterly2':
						data = {
							quarterlyDiscountEnabled: this.noVipDataDetail.quarterlyDiscountEnabled,
							quarterlyDiscountPrice: this.noVipDataDetail.quarterlyDiscountPrice,
							quarterlyContinuousEnabled: this.noVipDataDetail.quarterlyContinuousEnabled,
							quarterlyContinuousDuration: this.noVipDataDetail.quarterlyContinuousDuration,
							quarterlyEnabled: this.noVipDataDetail.quarterlyEnabled,
							quarterlyPrice: this.noVipDataDetail.quarterlyPrice
						}
						break;
					case 'monthly2':
						data = {
							monthlyDiscountEnabled: this.noVipDataDetail.monthlyDiscountEnabled,
							monthlyDiscountPrice: this.noVipDataDetail.monthlyDiscountPrice,
							monthlyContinuousEnabled: this.noVipDataDetail.monthlyContinuousEnabled,
							monthlyContinuousDuration: this.noVipDataDetail.monthlyContinuousDuration,
							monthlyEnabled: this.noVipDataDetail.monthlyEnabled,
							monthlyPrice: this.noVipDataDetail.monthlyPrice
						}
						break;
					case 'year3':
						data = {
							yearlyDiscountEnabled: this.noVipDataDetail.yearlyDiscountEnabled,
							yearlyDiscountPrice: this.noVipDataDetail.yearlyDiscountPrice,
							yearlyContinuousEnabled: this.noVipDataDetail.yearlyContinuousEnabled,
							yearlyContinuousDuration: this.noVipDataDetail.yearlyContinuousDuration,
							yearlyEnabled: this.noVipDataDetail.yearlyEnabled,
							yearlyPrice: this.noVipDataDetail.yearlyPrice
						}
						break;
					case 'half3':
						data = {
							halfDiscountEnabled: this.noVipDataDetail.halfDiscountEnabled,
							halfDiscountPrice: this.noVipDataDetail.halfDiscountPrice,
							halfContinuousEnabled: this.noVipDataDetail.halfContinuousEnabled,
							halfContinuousDuration: this.noVipDataDetail.halfContinuousDuration,
							halfEnabled: this.noVipDataDetail.halfEnabled,
							halfPrice: this.noVipDataDetail.halfPrice
						}
						break;
					case 'quarterly3':
						data = {
							quarterlyDiscountEnabled: this.noVipDataDetail.quarterlyDiscountEnabled,
							quarterlyDiscountPrice: this.noVipDataDetail.quarterlyDiscountPrice,
							quarterlyContinuousEnabled: this.noVipDataDetail.quarterlyContinuousEnabled,
							quarterlyContinuousDuration: this.noVipDataDetail.quarterlyContinuousDuration,
							quarterlyEnabled: this.noVipDataDetail.quarterlyEnabled,
							quarterlyPrice: this.noVipDataDetail.quarterlyPrice
						}
						break;
					case 'monthly3':
						data = {
							monthlyDiscountEnabled: this.noVipDataDetail.monthlyDiscountEnabled,
							monthlyDiscountPrice: this.noVipDataDetail.monthlyDiscountPrice,
							monthlyContinuousEnabled: this.noVipDataDetail.monthlyContinuousEnabled,
							monthlyContinuousDuration: this.noVipDataDetail.monthlyContinuousDuration,
							monthlyEnabled: this.noVipDataDetail.monthlyEnabled,
							monthlyPrice: this.noVipDataDetail.monthlyPrice
						}
						break;
				}
				data.purchasedPaymentRuleId=this.optionsId
				data.levelBenefits=this.noVipDataDetail.levelBenefits
				data.levelBenefitsId=this.noVipDataDetail.levelBenefitsId
				data.discountLimit=this.noVipDataDetail.discountLimit
				data.discountLimitCount=this.noVipDataDetail.discountLimitCount
				data.generalRightsEnabled=this.noVipDataDetail.generalRightsEnabled
				data.inMember = this.noVipDataDetail.inMember || ''
				// 营销获客1.0的会员支付方式
				uni.navigateTo({
					url: '/marketing_page/pages/member/pay_page/pay_page?data=' +
						encodeURIComponent(JSON.stringify(this.choseItemDetail)) + '&save=' + encodeURIComponent(JSON.stringify(
							data))
				});

				// let data = {
				// 	"buyLevelId": that.optionsId && parseInt(that.optionsId) || null,
				// 	"outTradeNo": "",
				// 	"outTradeStatus": 0,
				// 	"outTradeTime": uni.$u.timeFormat(null, 'yyyy-mm-dd hh:MM:ss'),
				// 	"payType": 1,
				// 	"plUserId": uni.getStorageSync('memberId') || ""
				// };
				// verifyPayStatus(data).then(res => {
				// 	if (res.code == 200) {
				// 		let payData = {
				// 			openId: uni.getStorageSync("openId"), // oGIXrv6BHN7TW8s_5G_u7zwlgl_4
				// 			totalFee: that.buyPrice * 100,
				// 			tradeType: 'JSAPI', // 交易类型：JSAPI -JSAPI支付 NATIVE -Native支付 APP -APP支付
				// 		}
				// 		https_1.unifiedOrders(payData).then(res => {
				// 			if (res.code === 0 && res.data) {
				// 				let data = res.data || {};
				// 				uni.requestPayment({
				// 					provider: 'wxpay',
				// 					timeStamp: data.timeStamp + '',
				// 					nonceStr: data.nonceStr,
				// 					package: data.package,
				// 					signType: data.signType || 'MD5',
				// 					paySign: data.sign,
				// 					success: function(res) {
				// 						console.log('success:' + JSON.stringify(res));
				// 						that.orderResultQuery(data.orderNo)
				// 					},
				// 					fail: function(err) {
				// 						console.log('fail:' + JSON.stringify(err));
				// 						that.cancelCharge(data)
				// 					}
				// 				});
				// 			}
				// 		})
				// 	} else {
				// 		that.showPayResult = true;
				// 		that.payResultContent = res.msg || '很抱歉，暂不支持';
				// 	}
				// })
			},
			cancelCharge(data) {
				const that = this
				https_1.unifiedOrders({
						totalFee: that.buyPrice * 100,
						tradeType: 'JSAPI',
						orderNo: data.orderNo,
						cancelRecharge: 2
					})
					.then((res) => {
						uni.showModal({
							title: '消息提示',
							content: '已取消',
							showCancel: false
						});
					});
			},
			orderResultQuery(orderNo) {
				https_1.orderResultQuery({
					'orderNo': orderNo
				}).then(res => {
					if (res.code === 0) {
						this.payleRule(orderNo)
					}
				})
			},
			payleRule(orderNo) {
				let data = {
					"buyLevelId": parseInt(this.optionsId),
					"outTradeNo": orderNo,
					"outTradeStatus": 1,
					"outTradeTime": uni.$u.timeFormat(null, 'yyyy-mm-dd hh:MM:ss'),
					"payType": 1,
					"plUserId": uni.getStorageSync('memberId') || ""
				};
				payleRule(data).then(res => {
					uni.showToast({
						title: '开通成功!',
						icon: 'none',
						duration: 1000
					});
					let type = 'buy'
					setTimeout(() => {
						uni.redirectTo({
							url: `/mine/pages/vip/hasVip?id=${this.noVipDataDetail.id}&from=${type}`,
						});
					}, 1000)
				})
			},
			setMemberIndex(val) {
				this.getMemberIndex = val;
				//首开特惠
				if (val == 'year1') {
					this.choseItem = {
						name: '包年',
						enabled: this.noVipDataDetail.yearlyDiscountEnabled, //开关
						price1: this.noVipDataDetail.yearlyDiscountPrice.toFixed(2), //价格1
						price2: this.noVipDataDetail.yearlyPrice.toFixed(2), //价格2
						discount: (this.noVipDataDetail.yearlyPrice - this.noVipDataDetail.yearlyDiscountPrice)
							.toFixed(2) //优惠
					}
				}
				if (val == 'half1') {
					this.choseItem = {
						name: '包半年',
						enabled: this.noVipDataDetail.halfDiscountEnabled,
						price1: this.noVipDataDetail.halfDiscountPrice.toFixed(2),
						price2: this.noVipDataDetail.halfPrice.toFixed(2),
						discount: (this.noVipDataDetail.halfPrice - this.noVipDataDetail.halfDiscountPrice).toFixed(2)
					}
				}
				if (val == 'quarterly1') {
					this.choseItem = {
						name: '包季',
						enabled: this.noVipDataDetail.quarterlyDiscountEnabled,
						price1: this.noVipDataDetail.quarterlyDiscountPrice.toFixed(2),
						price2: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.quarterlyPrice - this.noVipDataDetail.quarterlyDiscountPrice)
							.toFixed(2)
					}
				}
				if (val == 'monthly1') {
					this.choseItem = {
						name: '包月',
						enabled: this.noVipDataDetail.monthlyDiscountEnabled,
						price1: this.noVipDataDetail.monthlyDiscountPrice.toFixed(2),
						price2: this.noVipDataDetail.monthlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.monthlyPrice - this.noVipDataDetail.monthlyDiscountPrice)
							.toFixed(2)
					}
				}
				//连续包
				if (val == 'year2') {
					this.choseItem = {
						name: '连续包年',
						enabled: this.noVipDataDetail.yearlyContinuousEnabled,
						price1: this.noVipDataDetail.yearlyContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.yearlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.yearlyPrice - this.noVipDataDetail.yearlyContinuousDuration)
							.toFixed(2)
					}
				}
				if (val == 'half2') {
					this.choseItem = {
						name: '连续包半年',
						enabled: this.noVipDataDetail.halfContinuousEnabled,
						price1: this.noVipDataDetail.halfContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.halfPrice.toFixed(2),
						discount: (this.noVipDataDetail.halfPrice - this.noVipDataDetail.halfContinuousDuration)
							.toFixed(2)
					}
				}
				if (val == 'quarterly2') {
					this.choseItem = {
						name: '连续包季',
						enabled: this.noVipDataDetail.quarterlyContinuousEnabled,
						price1: this.noVipDataDetail.quarterlyContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.quarterlyPrice - this.noVipDataDetail
							.quarterlyContinuousDuration).toFixed(2)
					}
				}
				if (val == 'monthly2') {
					this.choseItem = {
						name: '连续包月',
						enabled: this.noVipDataDetail.monthlyContinuousEnabled,
						price1: this.noVipDataDetail.monthlyContinuousDuration.toFixed(2),
						price2: this.noVipDataDetail.monthlyPrice.toFixed(2),
						discount: (this.noVipDataDetail.monthlyPrice - this.noVipDataDetail.monthlyContinuousDuration)
							.toFixed(2)
					}
				}
				//单价
				if (val == 'year3') {
					this.choseItem = {
						name: '12个月',
						enabled: this.noVipDataDetail.yearlyEnabled, //开关
						price1: this.noVipDataDetail.yearlyPrice.toFixed(2),
						price2: this.noVipDataDetail.yearlyPrice.toFixed(2),
						discount: null
					}
				}
				if (val == 'half3') {
					this.choseItem = {
						name: '6个月',
						enabled: this.noVipDataDetail.halfEnabled, //开关
						price1: this.noVipDataDetail.halfPrice.toFixed(2),
						price2: this.noVipDataDetail.halfPrice.toFixed(2),
						discount: null
					}
				}
				if (val == 'quarterly3') {
					this.choseItem = {
						name: '3个月',
						enabled: this.noVipDataDetail.quarterlyEnabled,
						price1: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						price2: this.noVipDataDetail.quarterlyPrice.toFixed(2),
						discount: null
					}
				}
				if (val == 'monthly3') {
					this.choseItem = {
						name: '1个月',
						enabled: this.noVipDataDetail.monthlyEnabled,
						price1: this.noVipDataDetail.monthlyPrice.toFixed(2),
						price2: this.noVipDataDetail.monthlyPrice.toFixed(2),
						discount: null
					}
				}
				this.name = this.choseItem.name
				this.buyPrice = this.choseItem.price1
				this.discount = this.choseItem.discount

				console.log(this.choseItem, this.buyPrice, this.discount)

				this.choseItemDetail = {
					payLevelDuration: this.choseItem.enabled,
					payLevelPrice: this.choseItem.price1,
					payLevelId: this.noVipDataDetail.id,
				}

			},
			//购买记录
			buyHistory() {
				uni.navigateTo({
					url: "/marketing_page/pages/member/purchase_history/purchase_history",
				});
			},
			// 会员协议
			toAgreement() {
				uni.navigateTo({
					url: '/marketing_page/pages/member/agreement/agreement'
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.notOpened {
		width: 100%;
		min-height: 100vh;
		position: relative;
	}

	.topBg {
		width: 750rpx;
		height: 800rpx;
		background: linear-gradient(180deg, #030507 0%, rgba(3, 5, 7, 0) 100%);
		border-radius: 0rpx;

		.title {
			width: 100%;
			height: 130rpx;
			line-height: 80rpx;
			padding-right: 20rpx;
			box-sizing: border-box;
			text-align: right;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #D8D8D8;
		}
	}

	.grade {
		width: 750rpx;
		height: 52rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		background-size: 106% 100%;
		background-repeat: no-repeat;
		background-position: center;
		position: relative;

		>view {
			width: 20rpx;
			height: 20rpx;
			background-color: rgba(216, 216, 216, 0.4);
			border-radius: 50%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			>view {
				width: 12rpx;
				height: 12rpx;
				background: #D8D8D8;
				opacity: 1;
				border-radius: 50%;

				>text {
					position: absolute;
					top: -45rpx;
					right: -15rpx;
					color: #fff;
					font-size: 34rpx;
					display: block;
					width: 80rpx;
					height: 100rpx;
					text-align: center;
					line-height: 40rpx;
				}
			}
		}

		>view:nth-of-type(1) {
			position: absolute;
			left: 100rpx;
			top: 14rpx;

			/deep/ text {
				font-size: 24rpx;
			}
		}

		>view:nth-of-type(2) {
			position: absolute;
			top: -10rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		>view:nth-of-type(3) {
			position: absolute;
			right: 100rpx;
			top: 14rpx;

			/deep/ text {
				font-size: 24rpx;
			}
		}
	}


	.vipLogo {
		width: 94%;
		min-height: 306rpx;
		margin: 24rpx auto;
		border-radius: 20rpx;
		background-size: auto 100%;
		background-repeat: no-repeat;
		background-position: -110rpx center;
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.headerIcon {
			width: 100rpx;
			height: 100rpx;
			background-color: #F5F7FA;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}

		.userPhone {
			margin-left: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			>view:nth-of-type(1) {
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				line-height: 34rpx;
				color: #D4BAA2;
			}

			>view:nth-of-type(2) {
				margin-top: 20rpx;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 26rpx;
			}
		}
	}

	.package {
		width: 100%;
		background-color: #F5F7FA;
		position: absolute;
		top: 440rpx;
		left: 0;
		border-radius: 20rpx;

		.membersList {
			width: 94vw;
			margin: 0 auto;
			display: flex;
			flex-wrap: nowrap;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			overflow-x: scroll;
			overflow-y: hidden;
			padding: 40rpx 0rpx;
			box-sizing: border-box;

			.memberScrollList {
				flex: 1;
				display: flex;
				flex-wrap: nowrap;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.memberItem {
				width: 220rpx;
				height: 280rpx;
				margin: 0 16rpx;
				background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
				box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
				border-radius: 16rpx;
				border: 1rpx solid #FFFFFF;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.tehui {
					position: absolute;
					top: 0;
					left: 0;
					width: 120rpx;
					height: 40rpx;
					background: #F7A14A;
					border-radius: 16rpx 0rpx 16rpx 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
					line-height: 40rpx;
				}

				.checked {
					position: absolute;
					top: -1rpx;
					right: -1rpx;
				}

				.lijianActive {
					position: absolute;
					bottom: -2rpx;
					left: -2rpx;
					width: 102%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: linear-gradient(179deg, #E8C889 0%, #EDBE60 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				.lijian {
					position: absolute;
					bottom: -2rpx;
					left: -2rpx;
					width: 102%;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					background: linear-gradient(179deg, #E8C889 0%, #EDBE60 100%);
					border-radius: 0rpx 0rpx 16rpx 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}
			}

			.memberActive {
				background: linear-gradient(179deg, rgba(232, 200, 137, 0.16) 0%, rgba(237, 190, 96, 0.16) 100%);
				border-radius: 16rpx;
				border: 1rpx solid #DB9132;
				overflow: hidden;
			}
		}

		.checked {
			width: 50rpx;
			height: 50rpx;
		}

		.tips {
			width: 94%;
			margin: 16rpx auto;
			font-size: 26rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
		}
	}

	.rewardBox {
		width: 94%;
		margin: 16rpx auto;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFFFFF 31%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 2rpx solid #FFFFFF;

		.title {
			width: 240rpx;
			height: 57rpx;
			margin: -5rpx auto;
			font-size: 34rpx;
			text-align: center;
			line-height: 57rpx;
			font-weight: 400;
			color: #FFFFFF;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			background-position: center;
		}

		.my-line {
			width: 217rpx;
			height: 2rpx;
			background: linear-gradient(319deg, #E3BE87 0%, #F4D9AE 55%, rgba(244, 217, 174, 0) 95%, rgba(244, 217, 174, 0) 100%);
			opacity: 1;
		}

		.my-dot {
			width: 11rpx;
			height: 10rpx;
			background: linear-gradient(84deg, #E5C18C 0%, #C19C68 100%);
			opacity: 1;
		}
	}

	.integralCouponList {
		width: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
	}

	.none {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #606266;
	}

	.integralCouponItem {
		width: 220rpx;
		height: 160rpx;
		position: relative;

		.box1 {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 70%;
		}

		image {
			width: 100rpx;
			height: 100rpx;
		}

		.text-1 {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #606266;
		}

		.tip {
			background: #F7A14A;
			border-radius: 16rpx 16rpx 16rpx 0rpx;
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: -8px;
			padding: 0 10rpx;
			left: 85rpx;
		}
	}

	.cashCouponList {
		width: 100%;
		padding: 40rpx 40rpx 20rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
	}

	.cashCouponItem {
		width: 180rpx;
		height: 180rpx;
		color: #fc724c;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		position: relative;
		margin-right: 42rpx;
		margin-bottom: 25rpx;

		>view:nth-of-type(1) {
			font-size: 22rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #A26D35;
			position: absolute;
			top: 10rpx;
		}

		>view:nth-of-type(2) {
			font-size: 28rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: 800;
			color: #F0703E;
		}

		>view:nth-of-type(3) {
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #FAD9B1;
			position: absolute;
			bottom: 15rpx;
		}
	}

	.cashCouponItem:nth-child(3n+3) {
		margin-right: 0rpx;
	}

	.desc {
		width: 94%;
		min-height: 385rpx;
		margin: 16rpx auto;
		background: linear-gradient(360deg,
				#ffffff 0%,
				#ffffff 31%,
				#f4f6f8 99%,
				#f4f6f8 100%);
		box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 178, 0.2392);
		border-radius: 16rpx;
		opacity: 1;
		border: 2rpx solid #ffffff;
		padding: 32rpx;
		box-sizing: border-box;
	}

	.activityTitle {
		width: 100%;
	}

	.activityLine {
		width: 100%;
		height: 1rpx;
		margin: 30rpx 0;
		background-color: #dcdfe6;
	}

	.activityContent {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		font-size: 28rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #303133;
	}

	.bottomBtn {
		// width: 100%;
		// height: 120rpx;
		padding: 10rpx 20rpx;
		height: 88rpx;
		// display: flex;
		flex-direction: row;
		// justify-content: flex-start;
		// align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		right: 0;
		background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		opacity: 1;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;

			.left_top {
				height: 50%;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			.left_bottom {
				width: 100%;
				height: 50%;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				font-size: 22rpx;
				font-weight: 400;
				color: #909399;
			}
		}

		.right {
			margin-left: 22rpx;
			width: 260rpx;
			height: 88rpx;
			border-radius: 44rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.mingxiMask {
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		left: 0;
	}

	.bottomBtn2 {
		width: 100%;
		height: 460rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		position: fixed;
		bottom: 0rpx;
		left: 0;
		background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
		box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid rgba(255, 255, 255, 0.549);
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;

		.bottomBtn_top {
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			position: relative;

			.title {
				width: 100%;
				text-align: center;
				line-height: 40rpx;
			}

			.productItem {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				>view:nth-of-type(1) {
					width: 100%;
					text-align: left;
				}

				>view:nth-of-type(2) {
					width: 100%;
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					>view:nth-of-type(1) {
						font-size: 26rpx;
						font-weight: 400;
						color: #606266;
					}

					>view:nth-of-type(2) {
						font-size: 30rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: 400;
						color: #FC724C;
					}
				}
			}
		}

		.closeIcon {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
		}

		.bottomBtn {
			padding: 10rpx 20rpx;
			height: 88rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			position: fixed;
			bottom: 0rpx;
			left: 0;
			background: linear-gradient(360deg, #FFFFFF 0%, #F4F6F8 99%, #F4F6F8 100%);
			box-shadow: 0rpx -25rpx 67rpx 0rpx rgba(177, 182, 190, 0.2);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 1;
			border: 2rpx solid rgba(255, 255, 255, 0.549);

			.left {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;

				.left_top {
					height: 50%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}

				.left_bottom {
					width: 100%;
					height: 50%;
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;
					font-size: 22rpx;
					font-weight: 400;
					color: #909399;
				}
			}

			.right {
				width: 260rpx;
				height: 88rpx;
				border-radius: 44rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>